<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>WXP自创网</title>
    <!-- Bootstrap -->
    <link rel="shortcut icon" href="img/timg.jpg">    
    <link href="ateu/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
   <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
   <style type="text/css">
     .wuewhsdgh{
      display: none;
     }
     @media screen and (min-width: 992px){
      .wuewhsdgh{
        display: block;
      }
    }   
     @media screen and (min-width: 600px) and (max-width: 1400px){
      .jhdsh{
        color: red;
      }
     }
    @media screen and (max-width: 600px){
    .jhdsh{
      color: blue;
    }
  }
    @media screen and (max-width: 992px){
      .sdsad{
        position: absolute;
        top:0;
        left:0;
        z-index:-1;
      }
    }
    .wofakk{
      display: 10px;
    }
   </style>
<body>
    <nav class="navbar navbar-default" role="navigation" style="background-color: #459DF5;border-color:#3A97F5;margin-bottom: 0;">
          <div class="container-fluid">
          <div class="navbar-header" style="float: left;">
              <a class="navbar-brand" href="#">
                菜鸟教程
                <i class="glyphicon glyphicon-plus and"></i>
                <i class="glyphicon glyphicon-minus and" style="display: none;"></i>                
              </a>
          </div> 
              <div class="dropdown pull-right">              
                <a href="#" class="pull-right" data-toggle="dropdown" style="position: relative;">
                  <img src="img/timg.jpg" class="img-thumbnail" alt="Cinque Terre" width="40" height="40">
                  <span class="badge" style="background-color:red;width:20px;height:20px;line-height:20px;padding:0;border-radius:20px;position:absolute;top:0;right: 0;">21</span>
                </a>             
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                  <li role="presentation" class="text-center">
                    <a  href="#">信息
                    <span class="badge">21</span>
                  </a>
                  </li>
                  <li role="presentation" class="text-center" >
                    <a  href="#">充值</a>
                  </li>
                  <li role="presentation" class="text-center">
                    <a role="menuitem" tabindex="-1" href="#">退出</a>
                  </li>
                 
                </ul>
              </div>          
          </div>
      </nav>
        <div class="container-fluid"> 
          <div class="row">
            <!--左边栏-->
            <div class="col-md-2 sdsddfwe wuewhsdgh" style="background-color: #ccc;min-height: 1500px;padding: 0;margin-bottom: 0px; ">
              <div class="panel-group" id="accordion">
              <div class="panel panel-default">
                  <div class="panel-heading">
                      <h4 class="panel-title text-center">
                          <a data-toggle="collapse" data-parent="#accordion" 
                          href="#collapseOne">
                          电影
                          </a>
                      </h4>
                  </div>
                  <div id="collapseOne" class="panel-collapse collapse in">
                      <div class="panel-body">
                          Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                          cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                          vice lomo.
                      </div>
                  </div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">
                          <h4 class="panel-title text-center">
                              <a data-toggle="collapse" data-parent="#accordion" 
                              href="#collapseTwo">
                              电视剧
                          </a>
                          </h4>
                      </div>
                      <div id="collapseTwo" class="panel-collapse collapse">
                      <div class="panel-body">
                          <div class="btn-group">
                      <button type="button" class="btn btn-default">按钮 1</button>
                      <button type="button" class="btn btn-default">按钮 2</button>
                      <button type="button" class="btn btn-default">按钮 3</button>
                    </div>
                      </div>
                      </div>
                  </div>
                  <div class="panel panel-default">
                      <div class="panel-heading">
                          <h4 class="panel-title text-center">
                              <a data-toggle="collapse" data-parent="#accordion" 
                              href="#collapseThree">
                              美剧
                              </a>
                          </h4>
                      </div>
                      <div id="collapseThree" class="panel-collapse collapse">
                          <div class="panel-body">
                              Nihil anim keffiyeh helvetica, craft beer labore wes anderson 
                              cred nesciunt sapiente ea proident. Ad vegan excepteur butcher 
                              vice lomo.
                          </div>
                      </div>
                  </div>
              </div>
            </div>
             <!--右边栏-->
            <div class="col-md-10 sdsad" style="">

              <nav class="navbar navbar-default row" role="navigation" style="margin-bottom: 0px;">
                <div class="container-fluid">
                  <div class="navbar-header">
                    <a class="navbar-brand" href="#">自创网</a>
                  </div>
                  <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
                    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
                  </ul>
                </div>
              </nav>

              <div id="myCarousel" class="carousel slide container" style="width: 1204px; margin-bottom:20px; padding-left: 0; padding-right: 0;padding: 0;">
                <!-- 轮播（Carousel）指标 -->
                <ol class="carousel-indicators">
                  <li data-target="#myCarousel" data-slide-to="0" 
                    class="active">1</li>
                  <li data-target="#myCarousel" data-slide-to="1">2</li>
                  <li data-target="#myCarousel" data-slide-to="2">3</li>
                </ol>   
                <!-- 轮播（Carousel）项目 -->
                <div class="carousel-inner navbar navbar-default">
                   <!-- 轮播图1 -->
                    <div class="item active" >
                      <div style="display:inline-block; vertical-align: top;">
                        <img src="img/1-1.jpg">
                      </div>
                      <div style="display:inline-block;">
                        <div style=" margin-left: -4px;">
                          <img src="img/1-2.jpg">
                        </div>
                        <div> 
                          <div style="display:inline-block;margin-left: -4px;">
                             <img src="img/1-3.jpg">
                          </div>
                          <div style="display:inline-block;  margin-left: -4px;">
                             <img src="img/1-4.jpg">
                          </div>
                        </div>                     
                      </div>
                      <div style="display:inline-block;  vertical-align: top;  margin-left: -6px;width: 150px;">
                        <img src="img/1-5.jpg">
                      </div>
                    </div>
                     <!-- 轮播图2 -->                    
                    <div class="item">
                      <div style="display:inline-block; vertical-align: top;">
                        <img src="img/2-1.jpg">
                      </div>
                      <div style="display:inline-block;">
                        <div style=" margin-left: -4px;">
                          <img src="img/2-2.jpg">
                        </div>
                        <div> 
                          <div style="display:inline-block;margin-left: -4px;">
                             <img src="img/2-3.jpg">
                          </div>
                          <div style="display:inline-block;  margin-left: -4px;">
                             <img src="img/2-4.jpg">
                          </div>
                        </div>                     
                      </div>
                      <div style="display:inline-block;  vertical-align: top;  margin-left: -6px;">
                        <img src="img/2-5.jpg">
                      </div>
                    </div>
                     <!-- 轮播图3 -->                    
                    <div class="item">
                      <div style="display:inline-block; vertical-align: top;">
                        <img src="img/3-1.jpg">
                      </div>
                      <div style="display:inline-block;">
                        <div style=" margin-left: -4px;">
                          <img src="img/3-2.jpg">
                        </div>
                        <div> 
                          <div style="display:inline-block;margin-left: -4px;">
                             <img src="img/3-3.jpg">
                          </div>
                          <div style="display:inline-block;  margin-left: -4px;">
                             <img src="img/3-4.jpg">
                          </div>
                        </div>                     
                      </div>
                      <div style="display:inline-block;  vertical-align: top;  margin-left: -6px;">
                        <img src="img/3-5.jpg">
                      </div>
                    </div>
                </div>
                <!-- 轮播（Carousel）导航 -->
                <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    <span class="sr-only"></span>
                </a>
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    <span class="sr-only"></span>
                </a>
              </div> 
 
              <div class="container" style="width: 1204px;padding: 0">

                <div class="col-md-10" style="padding-right: 0; padding-left: 0;">
                  <div class="panel panel-default">
                    <div class="panel-body" style="padding: 10px">
                      
                       <li style="display:inline-block;"><a href="#" style="color: #222; font-size: 20px;">最新电视剧</a></li>
                         <li style="display:inline-block;"><a class="" href="#">自创网</a></li>

                    </div>
                    <div class="panel-footer">面板脚注</div>
                  </div>
                </div>

                <div class="col-md-2"  style="padding-right: 0; padding-left: 0;">
                  <div class="panel panel-default">
                    <div class="panel-body">
                      这是一个基本的面板
                    </div>
                    <div class="panel-footer">面板脚注</div>
                  </div>
                </div>
                
              </div>
              
              <div class="container-fluid" style="border:1px solid #ccc; margin-bottom:10px;">  
                <ul id="myTab" class="nav nav-tabs">
                    <li class="active"><a href="#home" data-toggle="tab">
                            电视剧</a>
                    </li>
                     <li><a href="#home1" data-toggle="tab">
                            电视剧</a>
                    </li>
                    <li><a href="#ios" data-toggle="tab">电影</a></li>
                    <li class="dropdown">
                        <a href="#" id="myTabDrop1" class="dropdown-toggle"
                           data-toggle="dropdown">动漫 <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                            <li><a href="#jmeter" tabindex="-1" data-toggle="tab">
                                    综艺</a>
                            </li>
                            <li><a href="#ejb" tabindex="-1" data-toggle="tab">
                                    儿童</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home" style="margin-top:10px;">
                        <div class="row">
                          <div class="col-sm-6 col-md-3">
                              <div class="thumbnail">
                                  <img src="img/火王.jpg"
                                       alt="通用的占位符缩略图">
                                  <div class="caption">
                                      <h3>火王之破晓之战</h3>
                                      <p>陈柏霖景甜三世虐恋</p>                                    
                                  </div>
                              </div>
                          </div>
                          <div class="col-sm-6 col-md-3">
                              <div class="thumbnail">
                                  <img src="img/保姆.jpg"
                                       alt="通用的占位符缩略图">
                                  <div class="caption">
                                      <h3>我的保姆手册</h3>
                                      <p>郑爽追爱傲娇男明星</p>                                   
                                  </div>
                              </div>
                          </div>
                          <div class="col-sm-6 col-md-3">
                              <div class="thumbnail">
                                  <img src="img/杨凌.gif"
                                       alt="通用的占位符缩略图">
                                  <div class="caption">
                                      <h3>回到明朝当王爷之杨凌传</h3>
                                      <p>蒋劲夫制霸神机营</p>                                    
                                  </div>
                              </div>
                          </div>
                          <div class="col-sm-6 col-md-3">
                              <div class="thumbnail">
                                  <img src="img/兄弟.jpg"
                                       alt="通用的占位符缩略图">
                                  <div class="caption">
                                      <h3>兄弟</h3>
                                      <p>失散兄弟卷入斗争旋涡</p>                                    
                                  </div>
                              </div>
                          </div>
                      </div>
                    </div>

                     <div class="tab-pane fade" id="home1">
                        <div class="col-sm-6 col-md-3">
                              <div class="thumbnail">
                                  <img src="img/国民.jpg"
                                       alt="通用的占位符缩略图">
                                  <div class="caption">
                                      <h3>民国少年侦探社</h3>
                                      <p>12月20日民国四少携手探案</p>                                    
                                  </div>
                              </div>
                          </div>
                    </div>

                    <div class="tab-pane fade" id="ios">
                        <div class="col-sm-6 col-md-3">
                              <div class="thumbnail">
                                  <img src="img/原来.jpg"
                                       alt="通用的占位符缩略图">
                                  <div class="caption">
                                      <h3>原来你还在这里</h3>
                                      <p>韩东君杨子姗深情初恋</p>                                    
                                  </div>
                              </div>
                          </div>
                    </div>
                    <div class="tab-pane fade" id="jmeter">
                        <div class="col-sm-6 col-md-3">
                              <div class="thumbnail">
                                  <img src="img/杨凌.gif"
                                       alt="通用的占位符缩略图">
                                  <div class="caption">
                                      <h3>回到明朝当王爷之杨凌传</h3>
                                      <p>蒋劲夫制霸神机营</p>                                    
                                  </div>
                              </div>
                          </div>
                    </div>
                    <div class="tab-pane fade" id="ejb">
                        <div class="col-sm-6 col-md-3">
                              <div class="thumbnail">
                                  <img src="img/tim .jpg"
                                       alt="通用的占位符缩略图">
                                  <div class="caption">
                                      <h3>火王之破晓之战</h3>
                                      <p>千年以前，宇宙中有一星域</p>                                    
                                  </div>
                              </div>
                          </div>
                    </div>
                 </div>
              </div>

             <div class="row" style="">
               <ul class="breadcrumb">
                    <li><a href="#">控制台</a></li>
                    <li class="active">表单区</li>
                </ul>
             </div>
                    <!-- 进度条 -->
          <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-success" role="progressbar"
                     aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                     style="width: 25%;">
                    <span class="popover-show" data-content="">25% 完成</span>
                </div>
            </div>
             <div class="container ewe">
                <form class="wuyy fort" role="form">
                  <div class="form-group">
                    <label for="name">名称</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入名称">
                  </div>  
                  <div class="form-group">
                    <label for="name">数量</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入名称">
                  </div>
                  <div class="form-group">
                    <label for="name">备注</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入名称">
                  </div>                         
                </form>

                <form class="wuuw fort" role="form" style="display: none;">
                    <div class="form-group">
                      <label for="name">成绩</label>
                      <input type="text" class="form-control" id="name" placeholder="请输入名称">
                    </div>  
                    <div class="form-group">
                      <label for="name">数量</label>
                      <input type="text" class="form-control" id="name" placeholder="请输入名称">
                    </div>
                    <div class="form-group">
                      <label for="name">备注</label>
                      <input type="text" class="form-control" id="name" placeholder="请输入名称">
                    </div>                         
                </form>

                <form class="ttuw fort" role="form" style="display: none;">
                  <div class="form-group">
                    <label for="name">评价</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入名称">
                  </div>  
                  <div class="form-group">
                    <label for="name">数量</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入名称">
                  </div>
                  <div class="form-group">
                    <label for="name">备注</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入名称">
                  </div>                         
                </form>

                <form class="wutt fort" role="form" style="display: none;">
                  <div class="form-group">
                    <label for="name">优秀</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入名称">
                  </div>  
                  <div class="form-group">
                    <label for="name">数量</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入名称">
                  </div>
                  <div class="form-group">
                    <label for="name">备注</label>
                    <input type="text" class="form-control" id="name" placeholder="请输入名称">
                  </div>                         
                </form>
             </div>
             <div class="container">
               <button type="button" class="btn btn-default col-md-6">上一页</button>                
               <button type="button" class="btn btn-primary col-md-6">下一页</button>

               <button type="button" class="btn btn-primary col-md-6 opacity " data-toggle="modal" data-target="#myModal" onclick="bbutton()" style="display: none;">提交</button>                 
                <!-- 模态框（Modal） -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" 
                            aria-hidden="true">×
                        </button>
                        <h4 class="modal-title" id="myModalLabel">
                          模态框（Modal）标题
                        </h4>
                      </div>
                      <div class="modal-body">
                        按下 ESC 按钮退出。
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default1" 
                            data-dismiss="modal">关闭
                        </button>
                        <button type="button" class="btn btn-success" >
                          提交更改
                        </button>
                      </div>
                    </div><!-- /.modal-content -->
                  </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
             </div>                         
            </div>  
          </div>     
          <div class=" row jumbotron text-center" style="margin-bottom:0px;">
            <p>底部内容</p>
          </div>    
        </div>
    <script src="js/jquery3.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="ateu/js/bootstrap.min.js"></script>
    <script type="text/javascript">
     // 方法1
       // $('.glyphicon').click(function(){
       //       console.log('hgdgs');
       //      $('.glyphicon-plus').toggleClass('$(glyphicon glyphicon-minus');   
       //      $('.col-md-2').toggle();
       //      $('.sdsddfwe').toggleClass('wuewhsdgh');     
       //   })
     // 方法2
        $('.and').click(function(){
         // console.log('hgdgs');
        $('.and').toggle();   
        $('.col-md-2').toggle();     
        })
     // 方法3
    
        // $('.glyphicon-plus').click(function(){
          //   $('glyphicon-plus').toggle();
          //   $('glyphicon-minus').toggle();
          // })
          //  $('.glyphicon-minus').click(function(){
          //   $('glyphicon-minus').toggle();
          //   $('glyphicon-plus').toggle();
        // })
       function bbutton(){
         // alert()
       }
       $('.btn-primary').click(function(){
        $('.fort').each(function(){
          var display=$(this).css('display');
          if(display=='block'){
            var n=$(this).index()+1;
            // console.log(n);
            if(n==3){
                $('.btn-primary').hide();
                $('.opacity').show();
               }                         
            if(n<4){
               $('.fort').hide();
               $('.fort:eq('+n+')').show();
               $('.progress-bar').css('width',(n+1)*25+'%');
               $('.popover-show').text((n+1)*25+'%'+' 已提交完成');
               return false;
            }
          }
        })
      })    
       $('.btn-default').click(function(){
        $('.fort').each(function(){
          var display=$(this).css('display');
          if(display=='block'){
            var n=$(this).index()-1;
            if(n<3){
              $('.btn-primary').show();
                $('.opacity').hide();
            }            
            if(n>-1){
               $('.fort').hide();
               $('.fort:eq('+n+')').show();
               $('.progress-bar').css('width',(n+1)*25+'%');
               $('.popover-show').text((n+1)*25+'%'+' 已提交完成');               
               return false;
            }
          }
        })
      })        
        
    </script>
  </body>
</html>